<script setup>
import { ref } from 'vue'
import { getVideoListAPI } from '@/services/course'
import { onReachBottom } from '@dcloudio/uni-app'
import { getCategoryAPI } from '@/services/table'
import forum from '@/pages/forum/forum.vue'
import dayjs from 'dayjs'
const list = ref(['科普课堂', '论坛'])
const currentIndex = ref(0)
const changeIndex = (index) => {
  currentIndex.value = index
  const params = ref({
    mt: '',
    st: '',
    keyword: '',
    pageNo: '1',
    pageSize: '6',
  }) //重置参数
  if (index === 0) getVideoList()
}
const params = ref({
  mt: '',
  st: '',
  keyword: '',
  pageNo: '1',
  pageSize: '6',
})
const total = ref(0)
const videoList = ref()
//控制空数据显示
const show = ref(false)
//获取科普视频数据
const getVideoList = async () => {
  const res = await getVideoListAPI(params.value)
  videoList.value = res.data.data
  total.value = res.data.total
  show.value = total.value === 0
}

//页面触底加载更多
const loadStatus = ref('loadmore')

const loadMore = async () => {
  const maxPageNo = Math.ceil(total.value / 4)
  if (params.value.pageNo >= maxPageNo) {
    //数据已经加载完成
    loadStatus.value = 'nomore'
    return
  }
  loadStatus.value = 'loading'
  //未加载所有数据
  params.value.pageNo++ //页数
  const res = await getVideoListAPI(params.value) //发送数据
  videoList.value.push(...res.data.data)
  if (params.value.pageNo >= maxPageNo) loadStatus.value = 'nomore'
  else loadStatus.value = 'loadmore'
}
// 页面触底
onReachBottom(() => {
  loadMore()
})
//页面数据不过支撑页面高度去完成触底操作的时候触发
const loadmore = async () => {
  const maxPageNo = Math.ceil(total.value / 4)
  if (params.value.pageNo >= maxPageNo) {
    //数据已经加载完成
    loadStatus.value = 'nomore'
    return
  }
  loadStatus.value = 'loading'
  //未加载所有数据
  params.value.pageNo++ //页数
  const res = await getVideoListAPI(params.value) //发送数据
  videoList.value.push(...res.data.data)
  if (params.value.pageNo >= maxPageNo) loadStatus.value = 'nomore'
  else loadStatus.value = 'loadmore'
}

getVideoList()

const onTap = (id) => {
  uni.navigateTo({ url: `/pages/learn/courseInfo?id=${id}` })
}

//获取类别
const categoryList = ref([])
const getCategoryList = async () => {
  const res = await getCategoryAPI()
  const newList = res.data.map((item) => {
    return {
      name: item.st,
    }
  })
  //去重
  const map = new Map()
  newList.unshift({ name: '全部' }, { name: '水果' }, { name: '蔬菜' })
  categoryList.value = newList.filter((item) => !map.has(item.name) && map.set(item.name, 1))
}
getCategoryList()
//清空搜索栏
const clear = () => {
  newKeyword.value = ''
  params.value.keyword = ''
  params.value.pageNo = 1
  params.value.pageSize = 6
  getVideoList()
}
//确定搜索框内容后触发
const confirm = () => {
  params.value.keyword = newKeyword.value
  params.value.pageNo = 1
  params.value.pageSize = 6
  getVideoList()
}
const current = ref(0) //标签栏的索引值
const newKeyword = ref('')

//点击tab栏触发
const onClick = async ({ index, name }) => {
  params.value.pageNo = 1
  params.value.pageSize = 6
  if (name === '全部') {
    params.value.mt = ''
    params.value.st = ''
    getVideoList()
    return
  }
  if (index === 1 || index === 2) {
    //选到的是大分类
    params.value.mt = name
    params.value.st = '' //如果选了大分类就置空小分类
  } else {
    params.value.st = name
    params.value.mt = '' //同理置空大分类
  }
  getVideoList()
}
</script>

<template>
  <cdCustomNavbar />
  <uv-subsection
    :list="list"
    :current="currentIndex"
    mode="button"
    fontSize="35rpx"
    bold
    custom-style="margin-top:20rpx;height: 90rpx;border-radius: 30rpx;"
    custom-item-style="border-radius: 30rpx;"
    activeColor="black"
    @change="changeIndex"
    bgColor="#456b45"
  ></uv-subsection>

  <view v-if="currentIndex === 0">
    <!-- 搜索条 -->
    <view style="padding: 20rpx">
      <uv-input
        placeholder="请输入关键词"
        border="surround"
        @clear="clear"
        clearable
        v-model="newKeyword"
        @confirm="confirm"
        shape="circle"
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
        customStyle="background-color: rgba(255, 255, 255, 0.5);"
      ></uv-input>
    </view>
    <!-- tab栏 -->
    <uv-sticky bgColor="#fff">
      <uv-tabs :list="categoryList" :current="current" @click="onClick" lineColor="#53A658">
        <!-- <template v-slot:right>
          <view style="padding-left: 4px" @tap="openPopup">
            <uv-icon name="list" size="21" bold></uv-icon>
          </view>
        </template> -->
      </uv-tabs>
    </uv-sticky>
    <!-- 空数据 -->
    <uv-empty
      mode="search"
      icon="https://cdn.uviewui.com/uview/empty/search.png"
      :show="show"
      marginTop="100rpx"
    ></uv-empty>
    <view class="video">
      <view class="videoBox" v-for="item in videoList" :key="item.id" @tap="onTap(item.id)">
        <!-- 仅拿到视频封面 减少网络压力-->
        <image
          :src="
            item.url + '?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast'
          "
          mode="aspectFit"
        />
        <view class="text">
          <span
            style="
              font-size: 28rpx;
              font-weight: bolder;
              white-space: nowrap; /* 让文本不换行 */
              overflow: hidden; /* 隐藏超出部分 */
              text-overflow: ellipsis; /* 超出部分用省略号代替 */
            "
            >{{ item.title }}</span
          >
          <span style="font-size: 16rpx; color: #545454; transform: translateY(-10rpx)">{{
            dayjs(item.createDate).format('YYYY-MM-DD')
          }}</span>
        </view>
      </view>
    </view>
    <!-- 加载更多组件 -->
    <uv-load-more :status="loadStatus" loadingIcon="semicircle" @loadmore="loadmore"></uv-load-more>
    <uv-popup
      ref="popup"
      mode="center"
      round="10"
      custom-style="
      height: 200rpx;
      display: flex;    
      justify-content: center;
      align-items: center;
      "
    >
      <view
        style="
          height: 100%;
          padding: 20rpx;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          flex-direction: column;
        "
      >
        <uv-button
          type="success"
          shape="circle"
          text="我的科普视频>"
          plain
          @click="onManage()"
        ></uv-button>
      </view>
    </uv-popup>
  </view>
  <view v-if="currentIndex === 1">
    <forum></forum>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f1f2f3;
}
.video {
  margin-top: 40rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.videoBox {
  width: 47%;
  height: 380rpx;
  margin: 10rpx 10rpx;
  border-radius: 20rpx;
  overflow: hidden;
  background-color: white;
}
.videoBox > image {
  width: 100%;
  height: 70%;
}
.text {
  padding: 5rpx;
  height: rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100rpx;
}
</style>
